// 初始化Jquery
$(document).ready(() => {
    // 第一步:画棋盘
    // 决定有多少行
    let rows = 30
    // 决定有多少列
    let cell = 50


    // 画行
    for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
        // 创建行的div
        let rowDiv = $("<div class='row'>")
        // 创建列的单元格
        for (let cellIndex = 0; cellIndex < cell; cellIndex++) {
            // 用jQuery 动态创建单元格的div标签
            let cellDiv = $("<div>")
            // 对单元格进行样式设定
            cellDiv.css({
                "background-color": "#f1f1f1",
                "border": "1px #fff solid",
                "width": "20px",
                "height": "20px"
            })
            // 给单元格添加行索引
            cellDiv.addClass("row_" + rowIndex);
            // 给单元格添加列索引
            cellDiv.addClass("cell_" + cellIndex)


            // 将单元格，添加到对应的行里
            rowDiv.append(cellDiv)
        }

        // 将行添加到棋盘
        $(".baoGuo").append(rowDiv)
    }

    /**
     * 玩家对象
     */
    let Player = {
        /**
         * 昵称
         */
        nikeName: "",
        score: 0,
        color: "ababab",
        /**
         * 行进速度(毫秒)
         */
        speed: 500,
        /**
         * 定义头部 / 行进方向
         */
        head: "R",// R:往右 L:往左  U:往上  D:往下
        /**
         * x:row
         * y:cell
         */
        position: [
            {
                x: 10,
                y: 10
            }, {
                x: 10,
                y: 11
            }, {
                x: 10,
                y: 12
            },
        ]
    }



    /**
     * 渲染玩家贪吃蛇的身体
     */
    Player.position.forEach(p => {
        // console.log(p);
        // 找到坐标对应的单元格
        // 将单元格的背景色修改为玩家对象中定义的颜色
        $(".row_" + p.x + ".cell_" + p.y).css("background-color", "#" + Player.color)
    })

    //使用定时器,完成蛇的移动
    // setInterval 是异步的,蛇的身体各自计算
    // setTimeout 是同步的,蛇的身体整体计算,但是setTimeout是一次性的,所以这里用到递归写法.
    // 递归函数:(非官方术语)自己调自己,形成一个循环调用.


    // 递归函数:移动
    function move() {
        // console.log("我move了");
        // console.log(Player.position.length);

        setTimeout(() => {
            // console.log("我执行了");
            // 执行移动代码
            // 蛇头所在的位置
            let headCellIndex = Player.position[Player.position.length - 1]
            // console.log(headCellIndex);

            let nextCellIndex;
            switch (Player.head) {
                case "U":
                    nextCellIndex = {
                        x: headCellIndex.x - 1,
                        y: headCellIndex.y
                    }
                    break;
                case "R":
                    nextCellIndex = {
                        x: headCellIndex.x,
                        y: headCellIndex.y + 1
                    }
                    break;
                case "D":
                    nextCellIndex = {
                        x: headCellIndex.x + 1,
                        y: headCellIndex.y
                    }
                    break;
                case "L":
                    nextCellIndex = {
                        x: headCellIndex.x,
                        y: headCellIndex.y - 1
                    }
                    break;
            }
            // 判定x 轴有没有跑到-1格 或 跑到 横轴的 最后一格之外
            if (nextCellIndex.x < 0 || nextCellIndex.x + 1 > rows) {
                alert("游戏结束")
            }
            // 判定y 轴有没有跑到-1格 或 跑到 竖轴的 最后一格之外
            else if (nextCellIndex.y < 0 || nextCellIndex.y + 1 > cell) {
                alert("游戏结束")
            }
            else {
                Player.position.push(nextCellIndex)
                let lastIndex = Player.position.splice(0, 1)
                // console.log(lastIndex);
                $(".row_" + nextCellIndex.x + ".cell_" + nextCellIndex.y).css("background-color", "#" + Player.color)

                $(".row_" + lastIndex[0].x + ".cell_" + lastIndex[0].y).css("background-color", "")
                move();
            }



        }, Player.speed);
    }
    move()

    $("body").keydown(function (e) {
        console.log(e.keyCode);

        switch (e.keyCode) {
            case 37: // 左
                // 如果,当前行进方向是右,则不能往左
                if (Player.head == "R")
                    return
                Player.head = "L"
                break;
            case 38: // 上

                if (Player.head == "D")
                    return
                Player.head = "U"
                break;
            case 39: // 右

                if (Player.head == "L")
                    return
                Player.head = "R"
                break;
            case 40: // 下

                if (Player.head == "U")
                    return
                Player.head = "D"
                break;


        }
    });

    setInterval(() => {
        let newSpeed = Player.speed - 100
        if (newSpeed <= 50) {
            Player.speed = 50
        }
        else {
            Player.speed = newSpeed
        }

    }, 0.1 * 60 * 1000)

    // 游戏系统配置
    let SystemConfig={
        // 食物投放间隔(2s)
        putFoodTime:2*1000,
        // 食物投放数量(2个)
        putFoodCount:2,
        // 定义存在的食物
        foods:[]
    }

    setInterval(()=>{
        // 投放食物
        SystemConfig.foods.push({x:1,y:3}
        )
        console.log(SystemConfig.foods);        
    },SystemConfig.putFoodTime)
})